import * as zrender from 'zrender';
import { useCalendarStore } from '../../../stores/calendar';

/**
 * 表格头部组件
 * 负责渲染时间轴和日期信息
 */
export class TableHeader {
  private zr: any;
  private chartState: ChartState;
  private headerGroup: zrender.Group;

  constructor(zr: any, chartState: ChartState) {
    this.zr = zr;
    this.chartState = chartState;
    this.headerGroup = new zrender.Group();
  }

  /**
   * 渲染表格头部
   */
  render() {
    this.headerGroup.removeAll();

    // 绘制表头背景
    this.drawHeaderBackground();

    // 绘制人员列标题
    this.drawPersonColumnHeader();

    // 绘制时间轴
    this.drawTimeScale();

    // 添加到画布
    this.zr.add(this.headerGroup);
  }

  /**
   * 绘制表头背景
   */
  private drawHeaderBackground() {
    const { canvasWidth } = this.chartState;
    const { timeScaleHeight } = this.chartState.responsiveConfig;

    const background = new zrender.Rect({
      shape: {
        x: 0,
        y: 0,
        width: canvasWidth,
        height: timeScaleHeight,
      },
      style: {
        fill: '#f8f9fa',
        stroke: '#dee2e6',
        lineWidth: 1,
      },
    });

    this.headerGroup.add(background);
  }

  /**
   * 绘制人员列标题
   */
  private drawPersonColumnHeader() {
    const { personColumnWidth, timeScaleHeight } = this.chartState.responsiveConfig;

    const title = new zrender.Text({
      style: {
        text: '人员',
        x: personColumnWidth / 2,
        y: timeScaleHeight / 2,
        verticalAlign: 'middle',
        fontSize: 14,
        fontWeight: 'bold',
        fill: '#495057',
      },
    });

    this.headerGroup.add(title);
  }

  /**
   * 绘制时间轴
   */
  private drawTimeScale() {
    const { personColumnWidth, unitWidth, timeScaleHeight } = this.chartState.responsiveConfig;
    const { timeScaleUnits } = this.chartState;
    const calendarStore = useCalendarStore();
    const startDate = new Date(calendarStore.dateRange.start);

    // 绘制时间单位
    for (let i = 0; i < timeScaleUnits; i++) {
      const x = personColumnWidth + i * unitWidth;
      const date = new Date(+startDate + i * 24 * 60 * 60 * 1000);

      // 日期文本
      const dateText = new zrender.Text({
        style: {
          text: `${date.getMonth() + 1}/${date.getDate()}`,
          x: x + unitWidth / 2,
          y: timeScaleHeight / 2,
          verticalAlign: 'middle',
          fontSize: 12,
          fill: '#6c757d',
        },
      });

      // 垂直分割线
      const divider = new zrender.Line({
        shape: {
          x1: x,
          y1: 0,
          x2: x,
          y2: timeScaleHeight,
        },
        style: {
          stroke: '#dee2e6',
          lineWidth: 1,
        },
      });

      this.headerGroup.add(dateText);
      this.headerGroup.add(divider);
    }

    // 绘制今天线
    this.drawTodayLine();
  }

  /**
   * 绘制今天线
   */
  private drawTodayLine() {
    const { personColumnWidth, unitWidth, timeScaleHeight } = this.chartState.responsiveConfig;
    const calendarStore = useCalendarStore();
    const startDate = new Date(calendarStore.dateRange.start);
    const today = new Date();

    // 计算今天在时间轴上的位置
    const todayOffset = Math.floor((+today - +startDate) / (24 * 60 * 60 * 1000));
    const todayX = personColumnWidth + todayOffset * unitWidth;

    if (todayX >= personColumnWidth && todayX <= this.chartState.canvasWidth) {
      const todayLine = new zrender.Line({
        shape: {
          x1: todayX,
          y1: 0,
          x2: todayX,
          y2: timeScaleHeight,
        },
        style: {
          stroke: '#dc3545',
          lineWidth: 2,
          lineDash: [5, 5],
        },
      });

      this.headerGroup.add(todayLine);
    }
  }

  /**
   * 更新图表状态
   */
  update(chartState: ChartState) {
    this.chartState = chartState;
  }
}
